<template>
  <div>
    <van-grid :column-num="4">
      <van-grid-item>
        <div class="sanjiaoxing"></div>
      </van-grid-item>
      <van-grid-item>
        <div class="jianbian"></div>
      </van-grid-item>
      <van-grid-item>
        <div class="duobianxing"></div>
      </van-grid-item>
      <van-grid-item>
        <div
          :class="isButtonSelected ? 'buttonSelected' : 'buttonCommon'"
          @click="isSelected"
        >
          <span>第一阶梯</span>
        </div>
      </van-grid-item>
      <van-grid-item>
        <div
          :class="isButtonOneSelected ? 'buttonOneSelected' : 'buttonOneCommon'"
          @click="isOneSelected"
        >
          <span>第二阶梯</span>
          <van-icon v-show="isButtonOneSelected" name="success" size="14" />
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  name: 'shape',
  data() {
    return {
      isButtonSelected: false,
      isButtonOneSelected: false
    }
  },
  methods: {
    isSelected() {
      this.isButtonSelected = !this.isButtonSelected
    },
    isOneSelected() {
      this.isButtonOneSelected = !this.isButtonOneSelected
    }
  }
}
</script>

<style lang="less" scoped>
.sanjiaoxing {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 60px solid yellowgreen;
}
.jianbian {
  width: 100px;
  height: 40px;
  background: linear-gradient(45deg, transparent 15px, yellowgreen 0),
    linear-gradient(-135deg, transparent 15px, yellowgreen 0);
  background-repeat: no-repeat;
}
.duobianxing {
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,
    linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,
    linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,
    linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;
  color: #fff;
  text-align: center;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.buttonSelected {
  width: 1.4rem;
  height: 0.6rem;
  background: linear-gradient(-145deg, #ffa900 15px, #fff 0);
  box-shadow: 0px 1px 4px #ccc8c5;
  border: 1px solid #ffa900;
  text-align: center;
  border-radius: 8px;
  span {
    line-height: 40px;
    font-size: 0.2rem;
  }
}
.buttonCommon {
  width: 1.4rem;
  height: 0.6rem;
  background: #fff;
  box-shadow: 0px 1px 4px #ccc8c5;
  text-align: center;
  border-radius: 8px;
  span {
    line-height: 40px;
    font-size: 0.2rem;
  }
}
.buttonOneSelected {
  width: 1.4rem;
  height: 0.6rem;
  background: linear-gradient(-45deg, #ffa900 0.3rem, #fff 0);
  box-shadow: 0px 1px 4px #ccc8c5;
  border: 1px solid #ffa900;
  text-align: center;
  border-radius: 8px;
  span {
    line-height: 0.6rem;
    font-size: 0.2rem;
  }
  i {
    position: relative;
    top: 0.28rem;
    left: 0.15rem;
    color: #fff;
  }
}
// .buttonOneSelected::after {
//   content: '√';
//   position: relative;
//   color: #fff;
//   top: 0.18rem;
//   left: 0.15rem;
//   font-size: 0.2rem;
//   font-family: serif;
// }
.buttonOneCommon {
  width: 1.4rem;
  height: 0.6rem;
  background: #fff;
  box-shadow: 0px 1px 4px #ccc8c5;
  text-align: center;
  border-radius: 8px;
  span {
    line-height: 0.6rem;
    font-size: 0.2rem;
  }
}
</style>